<script lang="ts" setup>

import { computed } from 'vue'

const emit = defineEmits(['pageQuery', 'query', 'update:pageData'])
const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    pageData: {
        type: Object,
        default: function() {
            return { }
        }
    }
})

const pageSizeArr = [20, 50, 100, 150, 200]

const totalIndex = computed(() => {
    const value = props.pageData ? parseInt(props.pageData.total, 10) : 0
    return isNaN(value) ? 0 : value
})

const pageChangeHandler = () => {
    emit('pageQuery')
}
const queryHandler = () => {
    emit('query')
}
const currentChange = (val:any) => {
 if (props.pageData)props.pageData.pageIndex = val
    emit('update:pageData', props.pageData)
}
const pageSizeChange = (val:any) => {
    if (props.pageData)props.pageData.length = val
    emit('update:pageData', props.pageData)
}
</script>

<template>
  <el-pagination :current-page="pageData.pageIndex"
                 :page-size="pageData.length"
                 :page-sizes="pageData.pageSizeList || pageSizeArr"
                 :total="totalIndex"
                 background
                 layout="total,sizes,prev,pager,next"
                 size="small"
                 @update:current-page="currentChange"
                 @update:page-size="pageSizeChange"
                 @size-change="queryHandler"
                 @current-change="pageChangeHandler" />
</template>

<style scoped lang="scss">

</style>
